<template>
    <div class="sys-roleusers-add">
        <el-dialog :title="dataForm.formFields.id ? '修改' : '关联用户'" :close-on-click-modal="false"
                   :visible.sync="visible" style="border-bottom: 1px solid #DCDFE6;overflow:auto;">
            <div>
                {{getRealNamesHandle()}}
            </div>
            <hr style="border:1px solid #E4E7ED">
            <div style="width: 30%;display: inline-block;margin: 20px 0 20px 0">
                <el-input
                        placeholder="请输入手机号或真实姓名"
                        v-model="searchKey"
                        clearable
                        @keyup.enter.native="selectUser">
                </el-input>
            </div>
            <el-button type="primary" @click="searchUserHandle">搜索</el-button>
            <el-table
                    @selection-change="handleSelectionChange"
                    :data="tableData"
                    border
                    ref="multipleTable"
                    style="width: 100%">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="username" label="账号"/>
                <el-table-column prop="phone" label="手机号码"/>
                <el-table-column prop="nickName" label="昵称"/>
                <el-table-column label="真实姓名" prop="realName"/>
            </el-table>
            <!-- 分页 -->
            <div class="block" style="text-align: right;margin-top: 10px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {add, update} from '@/api/sys/roleusers';
    import {getTableData} from '@/api/sys/user/index'

    export default {
        name: "sys-roleusers-add",
        data() {
            return {
                isSwitchPage: false,
                total: null,
                pageSize: 3,
                pageSizes: [3, 10, 20, 30, 40, 50, 100],
                currentPage: 1,
                multipleSelection: [],
                pareParam: "",
                searchKey: "",
                tableData: [],
                visible: false,
                users: {},
                dataForm: {
                    labelWidth: '200px',
                    formFields: {
                        id: 0,
                        userIds: [],
                        roleId: ''
                    },
                    formLabel: [
                        {title: '用户ID', prop: 'userId', type: 'input', placeholder: '请输入用户ID'},
                        {title: '角色ID', prop: 'roleId', type: 'input', placeholder: '请输入角色ID'}
                    ],
                    rules: {
                        userId: [
                            {required: true, message: '请输入用户ID', trigger: 'blur'}
                        ],
                        roleId: [
                            {required: true, message: '请输入角色ID', trigger: 'blur'}
                        ]
                    },
                    buttons: {
                        options: [
                            {
                                title: '提交',
                                type: 'primary',
                                loading: false,
                                style: {marginRight: '20px'},
                                click: (form, item) => {
                                    let promiseFun;
                                    if (form.model.id) {
                                        promiseFun = update;
                                    } else {
                                        promiseFun = add;
                                    }
                                    let ids = [];
                                    for (let key in this.users) {
                                        ids.push(key);
                                    }
                                    form.model.userIds = ids;
                                    this.handleSubmit(promiseFun, form, this, data => {
                                        this.visible = false;
                                        this.$emit('refreshDataList');
                                    });
                                }
                            }
                        ]
                    },
                }
            };
        },
        methods: {
            init(roleId, ids, names) {
                // 初始化的时候 清空输入框
                this.searchKey = "";
                this.visible = true;
                this.users = {};
                this.dataForm.formFields.roleId = roleId;
                const nameArr = names.split(',');
                ids.split(',').map((id, i) => {
                    this.users[id] = nameArr[i];
                });
                this.$nextTick(() => {
                    this.searchUserHandle()
                });
            },
            getRealNamesHandle() {
                let nameArr = [];
                for (let key in this.users) {
                    nameArr.push(this.users[key]);
                }
                return nameArr.join();
            },
            handleSelectionChange(params) {
                let users = {};
                params.map(item => users[item.id] = item.realName);
                this.tableData.map(item => {
                    if (this.users[item.id]) {
                        if (users[item.id]) {
                            delete users[item.id];
                        } else {
                            delete this.users[item.id];
                        }
                    }
                });
                for (let key in users) {
                    this.users[key] = users[key];
                }
            },
            searchUserHandle() {
                this.request(getTableData, {
                    pageNum: this.currentPage, pageSize: this.pageSize, searchKey: this.searchKey
                }, this, data => {
                    this.tableData = data.records;
                    this.total = data.total;
                    this.currentPage = data.current;
                    this.tableData = data.records;
                    this.tableData.forEach(item => {
                        if (this.users[item.id]) {
                            this.$nextTick(() => {
                                this.$refs.multipleTable.toggleRowSelection(item, true);
                            });
                        }
                    });
                });
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                this.searchUserHandle();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.searchUserHandle();
            }
        }
    }
</script>
